<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>回顾Object.defineProperty方法</title>
    <script src="../vue.js"></script>
</head>

<body>

    <script>
        Vue.config.productionTip=false;
        let man={
            name:'张三',
            sex:'男',
        }
        // Object.defineProperty(man, 'age', {
        //     value:"18"
        // })
        // console.log(man)
        // console.log(Object.keys(man))

        let number=20
        Object.defineProperty(man, 'age', {
            // value:"18",
            // enumerable:true, //控制属性是否可以枚举，默认值是false
            // writable:true, //控制属性是否可以被修改，默认值是false
            // configurable:true, //控制属性是否可以被删除，默认值是false

            //当有人读取man的age值属性时，get函数（getter）就会被调用，且返回值是age的值
            get(){
                return number
            },
            //当有人修改man的age值属性时，set函数（setter）就会被调用，且会收到修改的具体值
            set(value){
                if(value>22||value<18){
                    value=20
                    console.log('有人修改了age值，且值为',value)
                }
                number=value
            }
        })
        number=22
        console.log(man);
        /* //枚举
        console.log(man)
        console.log(Object.keys(man)) */

        /* //修改
        man.age=19
        console.log(man.age) */

        /* //删除
        delete man.age
        console.log(delete man.age);
        console.log(man) */

        
        
        
    </script>
</body>

</html>